<template>
  <!-- 行业管理 -- 行业分类 -->
  <div class="classify">
    <a-row :gutter="12" class="aRow-wrapper">
      <div v-has="'industry:add'" class="add-btn cursor" @click="add">新增</div>
      <top-title :content="content" :updateTime="true"></top-title>

      <a-col :span="24" class="listContent-wrapper">
        <div class="l-w_content">
          <div class="l-w_c_content">
            <div class="search-group">
              <div class="input-wrap">
                <div class="label">行业名称:</div>
                <div class="input-item">
                  <j-input
                    v-model="queryParam.informationName"
                    :maxLength="30"
                    clearable
                    placeholder="请填写行业名称"
                  ></j-input>
                </div>
              </div>

              <div class="btn-wrap">
                <a-button class="searchBtn" type="primary" @click="searchQuery()"> 搜索 </a-button>
                <a-button class="resetBtn" type="primary" @click="searchReset()"> 重置 </a-button>
              </div>
            </div>

            <div>
              <a-table
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                class="tableList"
                rowKey="id"
                @change="handleTableChange"
              >
                <template slot="informationName" slot-scope="records">
                  <a-tooltip placement="top">
                    <template slot="title">
                      <span>{{ records }} </span>
                    </template>
                    <span>{{ records }} </span>
                  </a-tooltip>
                </template>
                <template #iconUrl="records">
                  <img :src="imgPrefix + records.iconUrl" alt="" style="width: 0.5rem; height: 0.5rem" />
                </template>
                <template #appIconUrl="records">
                  <img :src="imgPrefix + records.appIconUrl" alt="" style="width: 0.5rem; height: 0.5rem" />
                </template>
                <template #webHomeUrl="records">
                  <img :src="imgPrefix + records.webHomeUrl" alt="" style="width: 0.5rem; height: 0.5rem" />
                </template>
                <template #webHomeClickUrl="records">
                  <img :src="imgPrefix + records.webHomeClickUrl" alt="" style="width: 0.5rem; height: 0.5rem" />
                </template>
                <template v-slot:action="records">
                  <span v-has="'industry:edit'" class="operation deatil-color" @click="editHandle(records)">编辑 </span>
                  <span v-has="'industry:delete'" class="operation warnColor" @click="showDelete(records)">删除 </span>
                </template>
              </a-table>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>

    <add-content ref="addContent" :title="titleModal" @refresh="searchQuery()"></add-content>

    <allMessage
      ref="allMessage"
      :publicVisible="publicVisible"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
  </div>
</template>

<script>
import { informationDelete } from '@/api/industry'
import { findEnableDictItemsbyCode } from '@/api/api'
import addContent from './modules/addContent'
import allMessage from '@/components/allMessage'
import topTitle from '@/components/topTitle'
import JInput from '@/components/jeecg/JInput'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'

export default {
  name: 'classify',
  components: { addContent, allMessage, topTitle, JInput },
  mixins: [JeecgListMixin],
  data() {
    return {
      content: [['行业分类']],
      url: {
        list: '/industry/information/page',
      },
      isorter: {
        column: '',
        order: '',
      },
      queryParam: {},
      ipagination: {
        current: 1,
        pageSize: 5,
        pageSizeOptions: ['5', '10'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      titleModal: '',
      publicVisible: false,
      imgPrefix: '',
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '行业名称',
          dataIndex: 'informationName',
          ellipsis: true,
          scopedSlots: { customRender: 'informationName' },
        },
        {
          title: '小程序图标',
          scopedSlots: { customRender: 'iconUrl' },
        },
        {
          title: 'app图标',
          scopedSlots: { customRender: 'appIconUrl' },
        },
        {
          title: 'web图标',
          scopedSlots: { customRender: 'webHomeUrl' },
        },
        {
          title: 'webClick图标',
          scopedSlots: { customRender: 'webHomeClickUrl' },
        },
        {
          title: '排序',
          dataIndex: 'informationOrder',
        },
        {
          title: '添加时间',
          dataIndex: 'createTime',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
        },
      ],
    }
  },
  created() {
    this.getImagePrefix()
  },
  methods: {
    add() {
      this.titleModal = '新增行业'
      this.$refs.addContent.show()
    },
    showDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },
    editHandle(records) {
      this.titleModal = '编辑行业'
      this.$refs.addContent.show({ imgPrefix: this.imgPrefix, ...records })
    },
    tipMessage(records) {
      informationDelete({ id: records.id }).then((res) => {
        this.$message.success(res.message)
        this.publicVisible = false
        this.searchQuery()
      })
    },
    getImagePrefix() {
      findEnableDictItemsbyCode({ code: 'static_server' }).then((res) => {
        this.imgPrefix = res.result[0].value
      })
    },
  },
}
</script>

<style lang="less" scoped>
.classify {
  width: 100%;
  height: 100%;
  background: var(--theme-content-bg);
  .aRow-wrapper {
    height: auto;
  }

  .l-w_c_content {
    height: calc(100% - 0.5rem - 20px);
  }
}
</style>
